<template>
  <div class="gzl">
    <div class="search">
      <el-form :inline="true" :model="search" class="demo-form-inline">
        <el-form-item label="输入搜索">
          <el-input
            v-model="search.key"
            placeholder="请输入设备名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="输入时间">
          <el-date-picker
            v-model="search.time"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            type="daterange"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="chage"
          ></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onsubmit">查询</el-button>
        </el-form-item>
      </el-form>
      <el-button class="ebtn" type="warning" @click="dialogVisible = true">新增价目表</el-button>
    </div>
    <el-table class="table" stripe :data="tableData" style="width: 100%" height="580">
      <el-table-column type="index" label="序号" align="center" width=" 70px;"/>
      <el-table-column prop="productName" label="产品名称" align="center"/>
      <el-table-column prop="productTuhao" label="产品图号" align="center"/>
      <el-table-column prop="price" label="单价" align="center"/>
      <el-table-column prop="carType" label="适用车型" align="center"/>
      <el-table-column prop="suggestPrice" label="建议维修工时价" align="center"/>
    </el-table>
    <div class="pgnt">
      <el-pagination
        background
        layout="prev, pager, next"
        :current-page="current"
        :page-size="pagesize"
        @current-change="handleCurrentChange"
        :page-count="total"
      >
      </el-pagination>
    </div>
    <!--新建价目表-->
    <el-dialog
      title="新建价目表"
      :visible.sync="dialogVisible"
      width="76%"
      :modal-append-to-body="false">
      <ul :data="siteParts">
        <li>
          <span>产品名称</span>
          <el-select

            v-model="siteParts.productName"
            placeholder="请选择产品名称"
            value-key="id"
            style="width:60%;"
            @change="GetProMiss(productList.$index, $event)">
            <el-option v-for="item in productList" :key="item.key" :label="item.productName"
                       :value="item"></el-option>
          </el-select>
        </li>
        <li>
          <span>产品图号</span>
          <el-input
            placeholder="请输入产品图号"
            v-model="siteParts.productTuhao"
            style="width: 60%"
          ></el-input>
        </li>
        <li>
          <span>产品单价</span>
          <el-input
            placeholder="请输入产品单价"
            v-model="siteParts.price"
            style="width: 60%"
          ></el-input>
        </li>
        <li>
          <span>适用车辆</span>
          <el-input
            placeholder="请输入适用车辆"
            v-model="siteParts.carType"
            style="width: 60%"
          ></el-input>
        </li>
        <li>
          <span>建议维修价格</span>
          <el-input
            placeholder="请输入建议维修价格"
            v-model="siteParts.suggestPrice"
            style="width: 60%"
          ></el-input>
        </li>

      </ul>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false , add()">确 定</el-button>
        <el-button @click="dialogVisible = false">取 消</el-button>
  </span>
    </el-dialog>
  </div>
</template>
<script>
import axios from 'axios'

export default {
  components: {},
  data() {
    return {
      search: {key: "", start: "", end: ""},
      tableData: [],
      total: 1,
      current: 1,
      pagesize: 10,
      dialogVisible: false,
      // dialogVisible1: false,
      radio: "1",
      value: "",
      options: [],
      productList: [],
      siteParts: {
        carType: "",
        createonId: "",
        price: "",
        productName: "",
        productTuhao: "",
        suggestPrice: "",
      },
    };
  },

  //监听属性 类似于data概念",
  computed: {},
  //监控data中的数据变化",
  watch: {},
  //生命周期 - 创建完成（可以访问当前this实例）",数据模型已加载，方法已加载,html模板已加载,html模板未渲染
  created() {
    this.userId = JSON.parse(localStorage.getItem("message")).Id;
    this.getList();
    this.getCai()
  },
  //方法集合",
  methods: {
    GetProMiss(ind, e) {
      this.siteParts.productName = e.productName;
      this.siteParts.productTuhao = e.productTuhao;
      this.siteParts.price = e.price;
    },
    // 获取供应商产品
    getCai() {
      axios("/JX_java/common/getAllSupplierProduct").then((res) => {
        let result = res.data.data;
        this.productList = result;
        console.log(result, 11111111111)
      });
    },
    //获取列表
    getList() {
      const json = {
        beginTime: this.search.start,
        endTime: this.search.end,
        key: this.search.key,
        pageNum: this.current,
        pageSize: this.pagesize,
      };
      axios
        .post(
          "/JX_java/site/parts/getSitePartsList",
          json
        )
        .then((res) => {
          this.tableData = res.data.data.content;
          console.log(res.data.data)
        });
    },
    //新增
    add(){
    const arr = {
      "carType": this.siteParts.carType,
      "createonId": this.userId,
      "createonTime": "",
      "id": 0,
      "price": this.siteParts.price,
      "productName": this.siteParts.productName,
      "productTuhao": this.siteParts.productTuhao,
      "status": 0,
      "suggestPrice": this.siteParts.suggestPrice,
      "supplierId": 0
    }

      axios
        .post(
          "/JX_java/site/parts/addSiteParts", arr
        )
        .then((res) => {
          if (res.data.data == "操作成功") {
            this.$message.success(res.data.data);
            // this.$router.go(-1);
          } else {
            this.$message.error(res.data.data);
          }
        });
    },
    handleCurrentChange(e) {
      this.current = e;
      this.getList();
    },

    onsubmit() {
      this.getList();
      // this.LoadContents();
    },
    chage(e) {
      if (e) {
        this.search.start = e[0];
        this.search.end = e[1];
      } else {
        this.search.start = "";
        this.search.end = "";
      }
    },
  },
  //生命周期 - 创建之前",数据模型未加载,方法未加载,html模板未加载
  beforeCreate() {
  },
  //生命周期 - 挂载之前",html模板未渲染
  beforeMount() {
  },
  //生命周期 - 挂载完成（可以访问DOM元素）",html模板已渲染
  mounted() {
  },
  //生命周期 - 更新之前",数据模型已更新,html模板未更新
  beforeUpdate() {
  },
  //生命周期 - 更新之后",数据模型已更新,html模板已更新
  updated() {
  },
  //生命周期 - 销毁之前",
  beforeDestroy() {
  },
  destroyed() {
  },
  //生命周期 - 销毁完成",
  //如果页面有keep-alive缓存功能，这个函数会触发",
  activated() {
  },
}
</script>
<style lang="scss" scoped>
.gzl {
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 10px;
}

.table {
  margin-bottom: 20px;
}

.pgnt {
  text-align: center;
}

.demo-form-inline {
  display: inline-block;
}

.search {
  height: 50px;
  border-radius: 5px;
  background-color: #fff;
  padding-left: 20px;
  padding-top: 10px;
  margin-bottom: 20px;
  overflow: hidden;
}

.ebtn {
  float: right;
  margin-right: 20px;
}

/deep/ .is-leaf {
  text-align: center;
  background: #fff;
}

.header {
  border-bottom: 1px solid rgb(220, 222, 226);
}

.intermediate {
  border-bottom: 1px solid rgb(220, 222, 226);
  //width: 98%;
  margin: auto;
  padding-bottom: 20px;


  ul {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    color: #909399;
    margin-top: 20px;

    li {

      width: 33%;
      font-size: 14px;
      margin-bottom: 10px;
      text-align: center;

      div {
        margin-top: 5px;
      }

      span {
        display: inline-block;
        width: 25%;
      }
    }
  }
}

.footer-top {
  margin-top: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgb(220, 222, 226);

  span {
    margin-right: 10px;
  }
}

.footer-kuai {
  ul {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    color: #909399;
    margin-top: 20px;

    li {
      width: 20%;
      font-size: 14px;
      margin-bottom: 10px;
      //text-align: center;
      margin-right: 10px;
      //vertical-align: middle;
      .el-button {
        //margin-top: 18px;
      }

      span {
        display: inline-block;
        margin-bottom: 10px;
      }
    }

    .el-button-box {
      //ext-align: center; t
      display: flex;
      align-items: flex-end

    }
  }
}

.huizo {
  margin-top: 20px;
  padding-bottom: 20px;
  color: #000;
  border-bottom: 1px solid RGB(220, 223, 230);
  font-weight: 700;
}

.el-dialog {
  ul {
    width: 100%;
    display: flex;
    flex-wrap: wrap;

    li {
      margin-top: 10px;
      width: 33%;

      span {
        display: inline-block;
        width: 28%;
        margin-right: 10px;
      }
    }
  }
}
</style>
